// 系统通用样式
.app-container.common {
  // 变量
  $blue: #1c6de2;
  $orange: #ff9966;
  $red: #f56c6c;
  $gray: #ededed;
  @mixin colorBtn($color, $hoverColor: #fff) {
    background: $color;

    &:hover {
      // color: $color;
      filter: brightness(1.2);
      color: $hoverColor;

      &:before,
      &:after {
        background: $color;
      }
    }
  }

  .b-btn {
    @include colorBtn($blue);
  }
  .o-btn {
    @include colorBtn($orange);
  }
  .r-btn {
    @include colorBtn($red);
  }
  .g-btn {
    @include colorBtn($gray);
  }
  .w-btn {
    @include colorBtn(#fff, #1c6de2);
    border: 1px solid #ddd !important;
    color: #222 !important;
    &:hover {
      filter: sepia(0.2);
    }
  }

  // element 按钮
  .el-button-40 {
    font-size: 16px !important;
    // color: #fff;
    padding: 11px 24px !important;
  }
  .el-button {
    // 默认高度 36px
    font-size: 14px;
    // color: #fff;
    padding: 10px 24px;
    border-radius: 4px;
  }

  /**
    修改默认elementUI表单样式
    包含(input框,select框,时间框,文本域等)
    分两种:36px高度;还有一种40px高度
    */

  // 表单通用样式
  // fontSize 为输入框内字号
  // fontSize2 为表单项标题字号
  @mixin var-el-form($height, $fontSize, $fontSize2) {
    // 变量
    $height: $height;
    $fontSize: $fontSize;
    //计数器高度样式跟框架input统一
    .el-input-number__increase,
    .el-input-number__decrease {
      height: calc(#{$height} - 3px);
      line-height: calc(#{$height} - 3px);
      transform: translateY(1px);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    //input框
    .el-input__inner {
      height: $height;
      color: #222222;
      font-size: $fontSize;
    }
    .el-input__inner::placeholder {
      font-size: $fontSize;
      color: #bbb !important;
    }
    /* 谷歌 */
    .el-input__inner::-webkit-input-placeholder {
      font-size: $fontSize !important;
      color: #bbb !important;
    }
    /* 火狐 */
    .el-input__inner:-moz-placeholder {
      font-size: $fontSize !important;
      color: #bbb !important;
    }
    /*ie*/
    .el-input__inner:-ms-input-placeholder {
      font-size: $fontSize !important;
      color: #bbb !important;
    }
    //input禁选框样式
    .el-input.is-disabled .el-input__inner {
      background-color: #ededed;
    }

    // 时间选择范围选择器 字体颜色
    .el-range-input {
      color: #222222;
    }
    .el-range-input::placeholder {
      color: #bbb;
      font-size: $fontSize !important;
    }
    //文本域
    .el-textarea__inner {
      height: 100px;
      font-size: $fontSize;
      color: #222;
      &::placeholder {
        font-size: $fontSize !important;
        color: #bbb;
      }
    }
    // 表单项标题
    .el-form-item__label {
      margin: 0;
      padding: 0;
      //text-align: justify;
      color: #666666 !important;
      font-weight: normal;
      font-size: $fontSize2 !important;
      line-height: $height;
    }

    //输入框带单位样式修改
    .el-input-group__append {
      width: 50px;
      text-align: center;
      box-sizing: border-box;
      padding: 0 10px;
      color: #999;
      font-size: $fontSize;
      font-weight: normal;
      background-color: #f5f7fa;
      //border: 1px solid #EDEDED;
    }

    .timeItem {
      margin-right: 0 !important;
    }
    //树形下拉框,默认32px高度的
    .vue-treeselect__placeholder,
    .vue-treeselect__single-value {
      line-height: $height;
    }
    .vue-treeselect__control {
      height: $height;
    }
  }

  // 默认表单
  .el-form {
    @include var-el-form(36px, 14px, 14px);
    //下拉框
    // .el-select,
    // .el-cascader {
    //   width: 260px;
    // }
    // //输入框宽度
    // .el-input {
    //   width: 260px;
    // }
  }

  // 40px高度的表单
  .el-form-height40 {
    @include var-el-form(40px, 14px, 16px);
    $height: 40px;

    .el-form-item__content {
      line-height: $height;
    }
    //表单项
    .el-form-item {
      line-height: $height;
      margin-bottom: 20px;
    }
    // 表单校验提示文字
    .el-form-item__error {
      // 伪元素
      &::before {
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        transform: translateY(2px);
        background-image: url("~@/assets/image/commonStyle/ico-rules.png");
        color: #f56c6c;
      }
    }
    // 数值输入框
    .el-input-number {
      width: 160px;
    }
    // 日期选择
    .el-date-editor--date {
      .el-input__prefix {
        // left: calc(100% - 30px);
        font-size: 16px;
      }
      // .el-input__suffix {
      //   right: 25px;
      // }
    }
    .date-line {
      margin: 0 7px;
    }
    // 时间范围
    .el-date-editor--timerange {
      .el-range__icon {
        font-size: 16px;
      }
    }
    .el-range-editor--mini .el-range-separator {
      line-height: 32px;
    }
    .el-range-input {
      font-size: 14px;
    }
    // 文件上传
    .el-upload__tip {
      display: inline-block;
      margin-left: 16px;
      font-size: 14px;
      color: #999;
    }
    // 头像上传-100px * 100px
    .pic-upload {
      .el-upload-list--picture-card .el-upload-list__item {
        width: 100px;
        height: 100px;
        border-radius: 4px;
      }
      .el-upload--picture-card {
        width: 100px;
        height: 100px;
        border-radius: 4px;
        line-height: 16px;
      }
      .el-upload--picture-card i {
        margin-top: 25px;
      }
      // 点击上传文字
      .upload-text {
        font-size: 16px;
        font-weight: 400;
        color: #5e6e88;
        margin-top: 10px;
      }
      // 删除图标
      .el-upload-list__item-status-label {
        transform: rotate(0deg);
        width: 18px;
        height: 18px;
        top: 0;
        right: 0;
        border-radius: 4px;
        background: url("~@/assets/image/commonStyle/ico-del.png") no-repeat;
        i {
          display: none;
        }
      }
      // 提示文字
      .el-upload__tip {
        display: inline-block;
        margin-left: 16px;
        font-size: 14px;
        color: #999;
        margin-top: 65px;
      }
    }
    // 封面上传
    .pic-upload.pic-w150 {
      .el-upload-list--picture-card .el-upload-list__item {
        width: 150px;
        height: 100px;
        border-radius: 4px;
      }
      .el-upload--picture-card {
        width: 150px;
        height: 100px;
        border-radius: 4px;
        line-height: 16px;
      }
    }

    //3.树形下拉框,$height高度的版本
    .vue-treeselect__placeholder,
    .vue-treeselect__single-value {
      line-height: $height;
      color: #222;
      font-size: 16px;
    }
    .vue-treeselect__control {
      height: $height;
    }
    .vue-treeselect--single .vue-treeselect__input-container {
      height: $height;
      line-height: $height;
    }

    // 上传按钮
    .upload-btn {
      width: 140px;
      height: 40px;
      background: #eff6ff;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #1c6de2;
      font-size: 14px;
      color: #1c6de2;
      img {
        transform: translateY(2px);
        width: 16px;
        height: 16px;
      }
    }
  }

  //   搜索框

  .search-common {
    margin-right: 10px;
    height: 40px;
    width: 400px;
    position: relative;
    .declareCalendarSearch {
      width: 400px;
      height: 44px;
      line-height: 44px;
      font-size: 14px;
      color: #aaa;
    }
    .el-input__inner {
      height: 44px !important;
      line-height: 44px;
      border-radius: 40px;
      background-color: #fff;
      border: 1px solid #dddddd;
      box-sizing: border-box;
      padding: 0 60px 0 24px;
      color: #aaa;
    }
    .el-input__inner::placeholder {
      font-size: 14px;
      color: #bbb;
    }
    .searchBtn {
      width: 90px;
      height: 40px;
      line-height: 40px;
      box-sizing: border-box;
      border-radius: 23px;
      background: linear-gradient(129deg, #468ff8 0%, #1c6de2 100%);
      font-size: 14px;
      position: absolute;
      right: 2px;
      top: 2px;
      text-align: center;
      color: #fff;
      cursor: pointer;
      &:hover {
        box-shadow: 0px 0px 10px 0px rgba(28, 109, 226, 0.5);
      }
      img {
        vertical-align: middle;
      }
    }
  }

  .el-table {
    //表头单元格的 className

    .headerStyle {
      padding: 1.5px 0;
      // background: #F5F7FA;
      background: #f8f8f9 !important;

      font-size: 16px !important;
      font-weight: 700;
      color: #5e6e88 !important;
      box-sizing: border-box;
      height: 50px;
      img {
        cursor: pointer;
        width: 16px;
        height: 16px;
        margin: 0;
      }
    }
    //   操作按钮
    .row-btn-del {
      color: red;
      cursor: pointer;
      margin-left: 10px;
    }
    .row-btn-detail {
      color: #1c6de2;
      cursor: pointer;
    }
  }
  // 标签

  .el-tag {
    font-size: 14px;
    border-radius: 8px 8px 8px 0px;
    margin-right: 10px;
  }
  // 表格布局表单 th td
  .form-table-common {
    width: 100%;
    border-left: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
    // 表单校验提示文字
    .el-form-item__error {
      // 伪元素
      &::before {
        content: "";
        display: none;
      }
      &::after {
        content: "";
        // 三角形 高5px 宽10px
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #222;
        position: absolute;
        top: -5px;
        left: 13px;
      }
      background: #222222;
      border-radius: 4px 4px 4px 4px;
      opacity: 0.9;
      line-height: 19px;
      padding: 8px 17px;
      font-size: 14px;
      color: #fff;
      z-index: 2;
      line-height: 0p;
    }
    .el-form-item {
      margin: 0;
    }
    .el-input {
      width: 100%;
      height: 36px;
      .el-input__inner {
        height: 36px;
        line-height: 36px;
      }
    }
    //下拉框
    .el-select,
    .el-cascader {
      width: 100%;
    }
    .w240 {
      width: 240px;
    }
    .require {
      &::before {
        content: "*";
        color: #f56c6c;
      }
    }

    td {
      border-right: 1px solid #ededed;
      border-top: 1px solid #ededed;
      padding: 0px 12px 0 18px;
      font-size: 14px;
      height: 50px;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      color: #222222;
    }

    th {
      height: 50px;
      border-right: 1px solid #ededed;
      border-top: 1px solid #ededed;
      background: #f5f7fa;
      text-align: center;
      font-size: 16px;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: bold;
      color: #5e6e88;
      width: 240px;
    }
  }
  // 动态增删行table 表单
  .form-table {
    border-collapse: collapse;
    width: 100%;
    .el-form-item {
      margin: 0;
    }
    .el-input {
      width: 100%;
      height: 36px;
      .el-input__inner {
        height: 36px;
        line-height: 36px;
      }
    }
    //下拉框
    .el-select,
    .el-cascader {
      width: 100%;
    }
    tr {
      .w240 {
        width: 240px;
      }
      td {
        border: 1px solid #ededed;
        height: 50px;
        font-size: 16px;
        color: #5e6e88;
        font-weight: 700;
        line-height: 50px;
        text-align: center;
        box-sizing: border-box;
        padding: 0 10px;
        .el-button {
          height: 40px;
          width: 40px;
          padding: 0;
        }
        .el-button--primary {
          background-color: #e4efff;
          border-color: #e4efff;
          color: #1c6de2;
        }
        .el-button--danger {
          background-color: #ffe9e9;
          border-color: #ffe9e9;
          color: #f56c6c;
        }
      }

      // 第一行
      &:nth-of-type(1) {
        td {
          background-color: #f5f7fa;
        }
      }
    }
  }
}
